<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人资料</title>

		
		<link href="/Public/person/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="/Public/person/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="/Public/person/css/personal.css" rel="stylesheet" type="text/css">
		<link href="/Public/person/css/infstyle.css" rel="stylesheet" type="text/css">
		<script src="/Public/person/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="/Public/person/AmazeUI-2.4.2/assets/js/amazeui.js"></script>	
		
		<!-- Theme CSS
		============================================ -->
   		<link href="/Public/mobilemall/css/themecss/so_megamenu.css" rel="stylesheet">
		<link id="color_scheme" href="/Public/mobilemall/css/theme.css" rel="stylesheet">

		 <!-- Libs CSS
		============================================ -->
	   	<link rel="stylesheet" href="/Public/mobilemall/css/bootstrap/css/bootstrap.min.css">
		<link href="/Public/mobilemall/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="/Public/mobilemall/js/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
	   	<link href="/Public/mobilemall/js/owl-carousel/owl.carousel.css" rel="stylesheet">
		<link href="/Public/mobilemall/css/themecss/lib.css" rel="stylesheet">
		<link href="/Public/mobilemall/js/jquery-ui/jquery-ui.min.css" rel="stylesheet">	
		<!-- 引用控制层插件样式 -->
    		<link rel="stylesheet" href="/Public/tools/php_img_upload/control/css/zyUpload.css" type="text/css">
	</head>

	<body style="background: #F5F8FA">
		<!--头 -->
		
    		<include file="./Application/Home/View/Share/header1.html"/>
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">

						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
						</div>
						<hr/>

						<!--头像 -->
						<div class="user-infoPic">

							<div class="filePic">
								
								<eq name="userdata.headimg" value="">
								<img class="am-circle am-img-thumbnail" src="" alt="你还没上传自己的个性化头像" />
								<else/>
								<img class="am-circle am-img-thumbnail" src="{$userdata.headimg.0}" alt="你还没上传自己的个性化头像" />
								</eq>
								
							</div>

							<p class="am-form-help">头像</p>

							<div class="info-m">
								<div><b>用户名：<i>{$userdata.username}</i></b></div>
								<div class="vip">
                                    
								</div>
							</div>
						</div>

						<!--个人信息 -->
						<div class="info-main">
							<form class="am-form am-form-horizontal" method="post" action="/Home/Person/saveInformation" enctype="multipart/form-data">

								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">昵称</label>
									<div class="am-form-content">
										<input type="text" id="user-name2" placeholder="nickname" value="{$userdata.username}" name="username">
                                          <small>昵称长度不能超过40个汉字</small>
									</div>
								</div>

								

								<div class="am-form-group">
									<label for="user-name" class="am-form-label">个人头像</label>
									<div class="am-u-sm-9">
									<div class="am-form-content">

				 <div class="tpl-form-file-img" >
                                                     <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default" data-am-gallery="{ pureview: true }" id="imgshowlist" style="height: 60px">
                                                    <eq name="userdata" value="">
                                                    <else/>
                                                     <li style="position:relative; max-width:50px; max-height:50px; " >
                                                       <div class="am-gallery-item">
                                                           <a href="" class="">
                                                             <img src="{$userdata.headimg.0}"  alt="" style="max-width:50px; max-height:50px; "/>
                                                             <input type="hidden" name="imgs[]" value="{$userdata.headimg.0}" />
                                                             <a class="am-close am-close-alt" onclick="delimg(this)" style="position:absolute; top:1px;left:48px; ">&times;</a>
                                                            </a>
                                                        </div>
                                                    </li>
                                                    </eq>
                                
                                                 </ul>
                                                </div>
							<button type="button" class="am-btn am-btn-danger am-btn-sm" data-am-modal="{target: '#upload-modal', closeViaDimmer: 0, width: 700, height: 360}" style="position:relative; "><i class="am-icon-cloud-upload" ></i> 上传头像</button>

									</div>
									</div>
								</div>

								<div class="am-form-group">
									<label class="am-form-label">性别</label>
									<div class="am-form-content sex">
									<eq name="userdata" value="">
									<label class="am-radio-inline">
											<input type="radio" name="sex" value="male" data-am-ucheck > 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="female" data-am-ucheck> 女
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="secret" data-am-ucheck> 保密
										</label>
									<else/>
									<switch name="userdata.sex" >
									<case value="male" ><label class="am-radio-inline">
											<input type="radio" name="sex" value="male" data-am-ucheck checked="checked"> 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="female" data-am-ucheck> 女
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="secret" data-am-ucheck> 保密
										</label>
									</case>
									<case value="female"><label class="am-radio-inline">
											<input type="radio" name="sex" value="male" data-am-ucheck > 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="female" data-am-ucheck checked="checked"> 女
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="secret" data-am-ucheck> 保密
										</label></case>
									<case value="fsecret"><label class="am-radio-inline">
											<input type="radio" name="sex" value="male" data-am-ucheck > 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="female" data-am-ucheck > 女
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="secret" data-am-ucheck checked="checked"> 保密
										</label></case>
									</switch>
									</eq>
									</div>
								</div>

								
								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<input id="user-phone" placeholder="telephonenumber" type="tel" value="{$userdata.telephone}" name="telephone">

									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">电子邮件</label>
									<div class="am-form-content">
										<input id="user-email" placeholder="Email" type="email" value="{$userdata.email}" name="email">

									</div>
								</div>
								
								<div class="info-btn">
									<button type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">保存修改</button>
								</div>

							</form>
						</div>

					</div>

				</div>
				<!--底部-->
				<!-- <div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">恒望科技</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于恒望</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有</em>
						</p>
					</div>
				</div> -->
			</div>

			<aside class="menu">
				<ul>
					<li class="person">
						<a href="/Home/Person/index"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<li class="person">
						<a href="#"><i class="am-icon-newspaper-o"></i>个人资料</a>
						<ul>
							<li class="active"> <a href="/Home/Person/information">个人信息</a></li>
							<li> <a href="/Home/Person/safety">安全设置</a></li>
							<li> <a href="/Home/Person/address">收货地址</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#"><i class="am-icon-balance-scale"></i>我的交易</a>
						<ul>
							<li><a href="/Home/Person/order">订单管理</a></li>
						</ul>
					</li>
					

					<li class="person">
						<a href="#"><i class="am-icon-tags"></i>我的小窝</a>
						<ul>
							<li> <a href="/Home/Person/collection">收藏</a></li>
							<li> <a href="/Home/Person/foot">足迹</a></li>
							<li> <a href="/Home/Person/comment">评价</a></li>
							<!-- <li> <a href="news.html">消息</a></li> -->
						</ul>
					</li>

				</ul>

			</aside>
		</div>
		<!--底部-->
		<include file="./Application/Home/View/Share/footer.html"/>
  <!-- 模态窗口用于上传图片 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="upload-modal">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">图片上传
		      	 <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
		</div>
		<div class="am-modal-bd">
		              <div id="demo" class="demo" ></div>
		              <div id="successinfo"></div>
		</div>
	</div>
</div>
<!-- 模态窗口end -->

<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="/Public/mobilemall/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/themejs/libs.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/unveil/jquery.unveil.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/dcjqaccordion/jquery.dcjqaccordion.2.8.min.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/datetimepicker/moment.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/Public/mobilemall/js/jquery-ui/jquery-ui.min.js"></script>

<!-- Theme files
============================================ -->
<script type="text/javascript" src="/Public/mobilemall/js/themejs/application.js"></script>
 <!-- 引用核心层插件 -->
<script type="text/javascript" src="/Public/tools/php_img_upload/core/zyFile.js"></script>
<!-- 引用控制层插件 -->
<script type="text/javascript" src="/Public/tools/php_img_upload/control/js/zyUpload.js"></script>

<script type="text/javascript" >
    
    $(function(){
    // 初始化插件
    var width = $(window).width();
    if ( width >= 650 )  width = '100%';
    else    width = "100%";

    $("#demo").zyUpload({
        width            :   width,                 // 宽度
        height           :   "auto",                 // 宽度
        itemWidth        :   "140px",                 // 文件项的宽度
        itemHeight       :   "100px",                 // 文件项的高度
        //url              :   "/upload/UploadAction",  // 上传文件的路径
        url              :   "/Home/Upload/upUserheadimg",
        inputName        :  '_img[]',
        id               :   1,
        multiple         :   true,                    // 是否可以多个文件上传
        dragDrop         :   false,                    // 是否可以拖动上传文件
        del              :   true,                    // 是否可以删除文件
        finishDel        :   false,                   // 是否在上传文件完成后删除预览
        /* 外部获得的回调接口 */
        onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
            console.info("当前选择了以下文件：");
            console.info(selectFiles);
        },
        onProgress: function(file, loaded, total){    // 正在上传的进度的回调方法
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.html(percent);
            console.info(file.index);
            console.info("当前正在上传此文件：");
            console.info(file.name);
            console.info("进度等信息如下：");
            console.info(loaded);
            console.info(total);
        },   
        onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
            console.info("当前删除了此文件：");
            console.info(file.name);
        },
        onSuccess: function(file, response){          // 文件上传成功的回调方法
            console.info("此文件上传成功：");
            $('#successinfo').append("<p>"+response+"</p>");
            console.info(response);
            var html= '<li style="position:relative;width:50px;height:50px;">'
                           +'<div class="am-gallery-item">'
                               +'<a href="" class="">'
                                 +'<img src="'+response+'"  alt="" style="max-width:50px; max-height:50px; "/>'
                                 +'<input type="hidden" name="imgs[]" value="'+response+'" />'
                                 +'<a class="am-close am-close-alt" onclick="delimg(this)" style="position:absolute; top:1px;left:40px; ">&times;</a>'
                                +'</a>'
                            +'</div>'
                          +'</li>';
            $('#imgshowlist').append(html);
            $('#upload-modal').modal('close');
            // alert(response);

        },
        onFailure: function(file, response){          // 文件上传失败的回调方法
            $("#uploadImage_" + file.index).css("opacity", 0.2);
            console.info("此文件上传失败：");
            console.info(file.name);
        },
        onComplete: function(response){               // 上传完成的回调方法
            console.info("文件上传完成");
            console.info(response);
        }
    });
    
});

</script>
<script>
            function delimg(obj){
                    $(obj).parents('li').remove();
            }

</script>

	</body>

</html>